<template>
  <div class="container">
    <!-- 功能模块导航 -->
    <div class="module-tabs">
  <el-tabs v-model="activeModule" @tab-change="handleModuleChange">
    <el-tab-pane label="协作模块" name="collaboration"></el-tab-pane>
    <el-tab-pane label="上报下达模块" name="reporting"></el-tab-pane>
    <el-tab-pane label="数据监管模块" name="supervision"></el-tab-pane>
  </el-tabs>
</div>

    <!-- 模块内容区域 -->
    <div class="module-content">
      <!-- 协作模块 -->
      <div v-if="activeModule === 'collaboration'" class="module-card">
        <h2>协作模块</h2>
        <p class="module-desc">基层法院间数据调取申请与审批流程管理</p>

        <div class="process-container">
          <!-- 流程步骤展示 -->
          <div class="process-steps">
            <div class="step-item" :class="{ active: currentStep >= 1 }">
              <div class="step-number">1</div>
              <div class="step-name">基层法院申请</div>
              <el-select
                v-model="applyCourt"
                placeholder="选择申请法院"
                class="step-select"
              >
                <el-option label="海州区法院" value="haizhou"></el-option>
                <el-option label="连云区法院" value="lianyun"></el-option>
                <el-option label="赣榆区法院" value="ganyu"></el-option>
              </el-select>
            </div>

            <div class="step-connector" :class="{ active: currentStep >= 2 }"></div>

            <div class="step-item" :class="{ active: currentStep >= 2 }">
              <div class="step-number">2</div>
              <div class="step-name">中院审批</div>
              <div class="step-actions">
                <el-button type="success" size="small" @click="approveStep">同意</el-button>
                <el-button type="danger" size="small" @click="rejectStep">驳回</el-button>
              </div>
            </div>

            <div class="step-connector" :class="{ active: currentStep >= 3 }"></div>

            <div class="step-item" :class="{ active: currentStep >= 3 }">
              <div class="step-number">3</div>
              <div class="step-name">数据提供法院处理</div>
              <el-select
                v-model="provideCourt"
                placeholder="选择数据提供法院"
                class="step-select"
              >
                <el-option label="海州区法院" value="haizhou"></el-option>
                <el-option label="连云区法院" value="lianyun"></el-option>
                <el-option label="赣榆区法院" value="ganyu"></el-option>
              </el-select>
              <el-button type="primary" size="small" @click="submitData">提交数据</el-button>
            </div>

            <div class="step-connector" :class="{ active: currentStep >= 4 }"></div>

            <div class="step-item" :class="{ active: currentStep >= 4 }">
              <div class="step-number">4</div>
              <div class="step-name">完成转交</div>
              <div class="step-status" v-if="currentStep >=4">
                <span class="status-success">已完成</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 申请表单 -->
        <el-card class="application-form">
          <el-form :model="collaborationForm" label-width="120px">
            <el-form-item label="申请事由">
              <el-input type="textarea" v-model="collaborationForm.reason" rows="3"></el-input>
            </el-form-item>
            <el-form-item label="所需数据类型">
              <el-checkbox-group v-model="collaborationForm.dataTypes">
                <el-checkbox label="案件基本信息"></el-checkbox>
                <el-checkbox label="当事人信息"></el-checkbox>
                <el-checkbox label="裁判文书"></el-checkbox>
                <el-checkbox label="执行信息"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="申请日期">
              <el-date-picker v-model="collaborationForm.applyDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="startCollaboration">提交申请</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!-- 上报下达模块 -->
      <div v-if="activeModule === 'reporting'" class="module-card">
        <h2>上报下达模块</h2>
        <p class="module-desc">基层法院与中院之间的申请、审批与任务下达管理</p>

        <el-tabs v-model="reportingType" class="reporting-tabs">
          <el-tab-pane label="基层法院申请" name="apply">
            <el-card>
              <el-form :model="reportForm" label-width="120px">
                <el-form-item label="申请法院">
                  <el-select v-model="reportForm.court" placeholder="选择法院">
                    <el-option label="海州区法院" value="haizhou"></el-option>
                    <el-option label="连云区法院" value="lianyun"></el-option>
                    <el-option label="赣榆区法院" value="ganyu"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="申请类型">
                  <el-radio-group v-model="reportForm.type">
                    <el-radio label="数据调取"></el-radio>
                    <el-radio label="事项请示"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="申请内容">
                  <el-input type="textarea" v-model="reportForm.content" rows="4"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">提交申请</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-tab-pane>

          <el-tab-pane label="中院审批" name="approve">
            <el-card>
              <el-table :data="approvalList" border>
                <el-table-column prop="id" label="序号" width="80"></el-table-column>
                <el-table-column prop="court" label="申请法院" width="150"></el-table-column>
                <el-table-column prop="type" label="申请类型" width="120"></el-table-column>
                <el-table-column prop="content" label="申请内容"></el-table-column>
                <el-table-column prop="date" label="申请日期" width="150"></el-table-column>
                <el-table-column label="操作" width="180">
                  <template #default>
                    <el-button type="success" size="small">同意</el-button>
                    <el-button type="danger" size="small">驳回</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-tab-pane>

          <el-tab-pane label="中院下达任务" name="assign">
            <el-card>
              <el-form :model="taskForm" label-width="120px">
                <el-form-item label="接收法院">
                  <el-select v-model="taskForm.court" placeholder="选择法院" multiple>
                    <el-option label="海州区法院" value="haizhou"></el-option>
                    <el-option label="连云区法院" value="lianyun"></el-option>
                    <el-option label="赣榆区法院" value="ganyu"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="任务类型">
                  <el-radio-group v-model="taskForm.type">
                    <el-radio label="提交辖区数据"></el-radio>
                    <el-radio label="处理辖区事项"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="任务内容">
                  <el-input type="textarea" v-model="taskForm.content" rows="4"></el-input>
                </el-form-item>
                <el-form-item label="截止日期">
                  <el-date-picker v-model="taskForm.deadline" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">下达任务</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 数据监管模块 -->
      <div v-if="activeModule === 'supervision'" class="module-card">
        <div class="stats-container">
          <!-- 图表统计 -->
          <div class="charts-row">
            <div class="chart-container">
              <canvas id="requestsChart"></canvas>
            </div>
            <div class="chart-container">
              <canvas id="collaborationChart"></canvas>
            </div>
            <div class="chart-container">
              <canvas id="pieChart"></canvas>
            </div>
          </div>
          <el-card class="detail-card">
            <div class="card-header">
              <H2 style="color: #4c9efd">全市实施监管</H2>
            </div>
            <el-table :data="tableData" border>
              <el-table-column prop="label" label="法院名称" width="200" header-align="center" align="center"></el-table-column>
              <el-table-column
                  header-align="center"
                  align="center"
                  v-for="court in courts"
                  :key="court.id"
                  :label="court.name"
                  :prop="court.prop"
              ></el-table-column>
            </el-table>
          </el-card>

          <!-- 详细列表 -->
          <el-card class="detail-card">
            <div class="card-header">
              <H2 style="color: #4c9efd">异常查询提醒</H2>
            </div>
            <el-table :data="usageDetails" border>
              <el-table-column prop="num" label="序号" width="120"></el-table-column>
              <el-table-column prop="court" label="异常法院" width="150"></el-table-column>
              <el-table-column prop="type" label="异常类型"></el-table-column>
              <el-table-column prop="content" label="异常内容"></el-table-column>
              <el-table-column prop="date" label="申请日期" width="120"></el-table-column>
              <el-table-column label="操作" width="200">
                <el-button type="success" plain>提醒按钮</el-button>
                <el-button type="danger" plain>切断按钮</el-button>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, reactive, computed } from 'vue'
import request from '@/utils/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import { View, Hide } from '@element-plus/icons-vue'
import {PieChart} from "@element-plus/icons";
import Chart from 'chart.js/auto' // 注意这里的导入方式变化
import { nextTick } from 'vue'
export default {
  name: 'GuanliXiezuo',
  components: {
    PieChart,
    View,
    Hide
  },
  setup() {
    // 模块切换
    const activeModule = ref('collaboration')
    const reportingType = ref('apply')
    const chartType = ref('requests')

    // 协作模块
    const currentStep = ref(1)
    const applyCourt = ref('')
    const provideCourt = ref('')
    const collaborationForm = reactive({
      reason: '',
      dataTypes: [],
      applyDate: new Date()
    })

    // 上报下达模块
    const reportForm = reactive({
      court: '',
      type: '数据调取',
      content: ''
    })

    const taskForm = reactive({
      court: [],
      type: '提交辖区数据',
      content: '',
      deadline: ''
    })

    // 审批列表模拟数据
    const approvalList = ref([
      {
        id: '001',
        court: '海州区法院',
        type: '数据调取',
        content: '申请调取连云区法院2023年民事案件数据',
        date: '2023-06-15'
      },
      {
        id: '002',
        court: '连云区法院',
        type: '事项请示',
        content: '关于跨区域执行案件协调的请示',
        date: '2023-06-18'
      }
    ])

    // 数据监管模块
    const totalRequests = ref(156)
    const approvedRequests = ref(139)
    const dataUsages = ref(328)
    const chartInstance = ref(null)
    const lineChartInstance = ref(null)
    const pieChartInstance = ref(null)
    const tableData = ref([
      {
        label: '实时查询量',
        shiyuan: 128,
        haizhou: 95,
        ganyu: 76,
        kaifaqu: 42,
        lianyun: 63,
        donghai: 51,
        guanyun: 38,
        guannan: 29
      }
    ])
    const courts = ref([
      { id: 1, name: '市中院', prop: 'shiyuan' },
      { id: 2, name: '海州', prop: 'haizhou' },
      { id: 3, name: '赣榆', prop: 'ganyu' },
      { id: 4, name: '开发区', prop: 'kaifaqu' },
      { id: 5, name: '连云', prop: 'lianyun' },
      { id: 6, name: '东海', prop: 'donghai' },
      { id: 7, name: '灌云', prop: 'guanyun' },
      { id: 8, name: '灌南', prop: 'guannan' }
    ])
    const usageDetails = ref([
      {
        num: '001',
        court: '海州区法院',
        type: '',
        content: '',
        date: '2023-06-20',
      },
      {
        num: '002',
        court: '连云区法院',
        type: '',
        content: '',
        date: '2023-06-20',
      },
      {
        num: '003',
        court: '赣榆区法院',
        type: '',
        content: '',
        date: '2023-06-20',
      }
    ])

    // 协作流程方法
    const startCollaboration = () => {
      if (!applyCourt.value || !provideCourt.value || !collaborationForm.reason) {
        ElMessage.warning('请填写完整申请信息')
        return
      }
      currentStep.value = 2
      ElMessage.success('申请已提交至中院审批')
    }

    const approveStep = () => {
      currentStep.value++
      ElMessage.success('审批已通过')
    }

    const rejectStep = () => {
      ElMessageBox.confirm('确定要驳回该申请吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        currentStep.value = 1
        ElMessage.info('申请已驳回')
      })
    }

    const submitData = () => {
      currentStep.value = 4
      ElMessage.success('数据已提交，正在转交申请法院')
    }

    // 模块切换处理
    const handleModuleChange = (module) => {
      // 如果切换到数据监管模块，初始化图表
      if (module === 'supervision') {
        nextTick(() => { // 等待 DOM 渲染完成
          initCharts()
        })
      }
    }

    // 初始化图表
    const initCharts = () => {
      // 销毁旧实例（若存在）
      if (chartInstance.value) {
        chartInstance.value.destroy()
      }
      if (lineChartInstance.value) {
        lineChartInstance.value.destroy();
      }
      if (pieChartInstance.value) {
        pieChartInstance.value.destroy();
      }
      const requestsCtx = document.getElementById('requestsChart').getContext('2d')
      chartInstance.value =  new Chart(requestsCtx, {
        type: 'bar',
        data: {
          labels: ['市中院', '海州', '开发区', '连云', '赣榆', '东海',"灌云","灌南"],
          datasets: [{
            label: '本月查询',
            data: [35, 28, 22, 18, 15, 20, 5, 6],
            backgroundColor: '#1c8bf2'
          }, {
            label: '平均月查询',
            data: [32, 25, 20, 16, 14, 18, 9, 10],
            backgroundColor: '#2ac45d'
          }]
        },
        options: {
          plugins: {
            title: {
              display: true,
              text: '全市查询情况统计', // 图表标题内容
              font: {
                size: 16, // 标题字体大小
                weight: 'bold' // 标题字体粗细
              },
              color: '#333' // 标题颜色
            }
          },
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            y: { beginAtZero: true }
          }
        }
      })
      // 折线图
      const ctx = document.getElementById('collaborationChart').getContext('2d');
      lineChartInstance.value = new Chart(ctx, {
        type: 'line',
        data:{
          labels:['市中院', '海州', '开发区', '连云', '赣榆', '东海',"灌云","灌南"],
          datasets:[
            {
              label:'数据协作',
              data:[10,25,20, 5, 15, 10, 15, 10],
              borderColor: 'rgb(59, 130, 246)',
              tension: 0,
              fill: false,
              pointStyle: 'line', // 数据点样式（与图例标记同步）
              pointRadius: 4, // 数据点大小
              pointHoverRadius: 6 //  hover时数据点大小
            },
            {
              label: '去年同期协作数据',
              data: [30, 25, 15, 35, 10, 20, 25, 20],
              borderColor: 'rgb(16, 185, 129)',
              tension: 0,
              fill: false,
              pointStyle: 'line', // 数据点样式（与图例标记同步）
              pointRadius: 4,
              pointHoverRadius: 6
            }
          ]
        },
        options:{
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            title: {
              display: true,
              text: '全市协作情况', // 图表标题内容
              font: {
                size: 16, // 标题字体大小
                weight: 'bold' // 标题字体粗细
              },
              color: '#333' // 标题颜色
            }
          },
        },
        scales:{
          y: { beginAtZero: true }
        }
      })

      const pieCtx = document.getElementById('pieChart').getContext('2d');
      pieChartInstance.value = new Chart(pieCtx,{
        type:'pie',
        data:{
          labels: ['市中院', '海州', '开发区', '连云', '赣榆', '东海', '灌云', '灌南'],
          datasets:[
            {
              label: '各区域协作占比',
              data: [10, 25, 20, 5, 15, 10, 15, 10],
              backgroundColor: [
                'rgb(59, 130, 246)',
                'rgb(16, 185, 129)',
                'rgb(249, 115, 22)',
                'rgb(139, 92, 246)',
                'rgb(236, 72, 153)',
                'rgb(6, 182, 212)',
                'rgb(16, 185, 129)',
                'rgb(245, 158, 11)'
              ],
              borderColor: 'white', // 白色边框分隔各部分
              borderWidth: 2 // 边框宽度
            }
          ]
        },
        options:{
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            title: {
              display: true,
              text: '全市数据情况', // 饼图标题
              font: {
                size: 16,
                weight: 'bold'
              },
              color: '#333'
            },
          }
        }
      })
    }

    // 页面加载时初始化
    onMounted(() => {
      // 如果默认显示数据监管模块，初始化图表
      if (activeModule.value === 'supervision') {
        initCharts()
      }
    })

    return {
      activeModule,
      reportingType,
      chartType,
      currentStep,
      applyCourt,
      provideCourt,
      collaborationForm,
      reportForm,
      taskForm,
      approvalList,
      totalRequests,
      approvedRequests,
      dataUsages,
      usageDetails,
      tableData,
      courts,
      chartInstance,
      lineChartInstance,
      pieChartInstance,
      startCollaboration,
      approveStep,
      rejectStep,
      submitData,
      handleModuleChange
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.container {
  min-height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 20px;
  box-sizing: border-box;
}

/* 系统标题 */
.system-header {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.system-header h1 {
  font-size: 28px;
  margin-bottom: 10px;
}

.system-header p {
  font-size: 16px;
  color: #666;
}

/* 模块标签页 */
.module-tabs {
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 10px;
}

/* 模块内容 */
.module-content {
  width: 100%;
}

.module-card {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.module-card h2 {
  color: #1f2d3d;
  margin-bottom: 10px;
  font-size: 20px;
  border-left: 4px solid #409eff;
  padding-left: 10px;
}

.module-desc {
  color: #666;
  margin-bottom: 20px;
  font-size: 14px;
}

/* 协作模块流程 */
.process-container {
  margin-bottom: 30px;
}

.process-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 40px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
  position: relative;
}

.step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #e5e6eb;
  color: #86909c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 10px;
}

.step-name {
  font-size: 14px;
  color: #86909c;
  margin-bottom: 10px;
  text-align: center;
}

.step-connector {
  flex: 1;
  height: 2px;
  background-color: #e5e6eb;
  margin: 0 10px;
}

.step-item.active .step-number {
  background-color: #409eff;
  color: white;
}

.step-item.active .step-name {
  color: #409eff;
  font-weight: 500;
}

.step-connector.active {
  background-color: #409eff;
}

.step-select {
  width: 100%;
  margin-top: 10px;
}

.step-actions {
  margin-top: 10px;
  display: flex;
  gap: 5px;
}

.step-status {
  margin-top: 10px;
}

.status-success {
  color: #67c23a;
  font-size: 14px;
}

/* 申请表单 */
.application-form {
  margin-top: 20px;
}

/* 上报下达模块 */
.reporting-tabs {
  margin-top: 10px;
}

/* 数据监管模块 */
.stats-container {
  margin-top: 20px;
}

.stat-card {
  text-align: center;
  padding: 20px 10px;
}

.stat-title {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #1f2d3d;
  margin-bottom: 5px;
}

.stat-desc {
  font-size: 12px;
  color: #67c23a;
}

.chart-card {
  margin-top: 20px;
  padding: 15px;
}

.chart-header {
  font-size: 24px;
  margin-bottom: 15px;
  color: #4c9efd;
  font-weight: 700;
}

.chart-container {
  flex: 1; /* 三个容器平均分配宽度（1:1:1） */
  min-width: 0; /* 避免内容过宽时撑破容器 */
  height: 300px; /* 固定图表高度（根据需要调整） */
}

.detail-card {
  margin-top: 20px;
}

.card-header {
  font-size: 16px;
  margin-bottom: 15px;
  color: #1f2d3d;
}

/* 调整标签页文字大小 */
::v-deep .el-tabs__item {
  font-size: 24px; /* h2通常的字体大小范围是24-32px */
  padding: 0 20px; /* 增加左右内边距，让文字有更多空间 */
  height: 50px; /* 增加标签高度，配合大字体 */
  line-height: 50px; /* 保持文字垂直居中 */
}

/* 可选：调整激活状态下的样式 */
::v-deep .el-tabs__item.is-active {
  font-weight: bold; /* 激活的标签更突出 */
}
.pie-chart-container {
  width: 100%;
  min-height: 400px;
  padding: 20px;
  box-sizing: border-box;
}

.chart-wrapper {
  width: 100%;
  height: 100%;
  min-height: 360px;
}
.charts-row {
  display: flex; /* 横向排列子元素 */
  gap: 20px; /* 图表之间的间距（可选，根据需要调整） */
  width: 100%; /* 占满父容器宽度 */
  padding: 0 10px; /* 左右内边距，避免贴边 */
  box-sizing: border-box; /* 确保 padding 不影响总宽度 */
}
.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}
</style>
